import React from 'react'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useNavigate } from 'react-router-dom'
import classNames from 'classnames'
export default function NavBar(props) {
  const { changeVisible, className, children, extra, ...rest } = props
  const navigate = useNavigate()
  // 后退
  function back() {
    // 判断父组件是否传递了修改popup显示和隐藏的方法
    if (changeVisible) {
      changeVisible()
    } else {
      navigate(-1)
    }
  }
  return (
    <div className={classNames(styles.root, className)}>
      {/* 后退按钮 */}
      <div className="left">
        <Icon type="iconfanhui" onClick={back} />
      </div>
      {/* 居中标题 */}
      {children && <div className="title">{children}</div>}
      {/* 右侧内容 */}
      {extra ? (
        <div {...rest} className="right">
          {extra}
        </div>
      ) : (
        ''
      )}
    </div>
  )
}
